<script setup lang="ts">
  import { tableHeaderCellStyle } from '@/utils/tools'
  import { CaretBottom, CaretRight } from '@element-plus/icons-vue'
  import { ref } from 'vue'
  import { getOrderGoodsDetail } from '@/api/order'
  import zhanpai from '@/assets/image/zhanpai.png'
  import { GoodInfo } from './types'

  const props = defineProps({
    orderId: {
      type: String,
      required: true,
    },
  })

  // 产品信息弹窗
  const productDrawer = ref(false)

  // 产品信息 弹窗数据
  const formLabelAlign = ref<GoodInfo>({
    address: '',
    area: '',
    buyTime: '',
    city: '',
    codes: [],
    endTime: '',
    goodsBrand: '',
    goodsBrandId: '',
    goodsId: '',
    goodsModel: '',
    goodsName: '',
    goodsSpec: '',
    goodsSpecId: '',
    goodsType: '',
    id: '',
    province: '',
    qty: 0,
    town: '',
    userName: '',
    userPhone: '',
  })

  // 列表总条数
  const total = ref(0)

  // 分页配置
  const pagination = ref({
    limit: 4,
    page: 1,
  })

  // 列表数据
  const tableData = ref<Array<GoodInfo>>([])

  // 获取工单详情商品
  const getOrderGoods = async () => {
    const res = await getOrderGoodsDetail(props.orderId, pagination.value)
    tableData.value = res.data.data?.rows
    total.value = Number(res.data.data.total)
  }

  // 展示弹窗
  const showDrawer = (val: GoodInfo) => {
    productDrawer.value = true
    formLabelAlign.value = val
  }

  // 打开的面板
  const activeNames = ref(['good_info'])

  defineExpose({
    getOrderGoods,
  })
</script>

<template>
  <div>
    <el-collapse v-model="activeNames">
      <el-collapse-item name="good_info">
        <template #title>
          <div
            style="
              box-sizing: border-box;
              padding: 0 16px;
              display: flex;
              align-items: center;
              gap: 5px;
            "
          >
            <el-icon>
              <template v-if="activeNames.includes('good_info')">
                <CaretBottom />
              </template>
              <template v-else>
                <CaretRight />
              </template>
            </el-icon>
            <span>商品信息</span>
          </div>
        </template>
        <div style="box-sizing: border-box; padding: 0 16px">
          <el-table
            :border="true"
            :data="tableData"
            resizable
            stripe
            style="width: 100%"
            row-key="id"
            :header-cell-style="tableHeaderCellStyle"
          >
            <template #empty>
              <el-empty description="暂无数据" :image-size="120" />
            </template>
            <el-table-column label="序号" width="100">
              <template v-slot="item">
                <div class="ord_dis">
                  <span> {{ item.$index + 1 }} </span>
                  <img :src="zhanpai" class="img" @click="showDrawer(item.row)" alt="" />
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="codes" show-overflow-tooltip label="商品编号" width="150" />
            <el-table-column prop="pro" show-overflow-tooltip label="商品信息">
              <template #default="scope">
                {{ scope.row.goodsBrand }}&nbsp;{{ scope.row.goodsName }}&nbsp;{{
                  scope.row.goodsModel
                }}&nbsp;{{ scope.row.goodsSpec }}
              </template>
            </el-table-column>
            <el-table-column prop="qty" show-overflow-tooltip label="数量" width="60" />
            <el-table-column prop="buyTime" show-overflow-tooltip label="购买时间" width="150" />
            <el-table-column prop="endTime" show-overflow-tooltip label="质保到期" width="150" />
            <el-table-column prop="address" show-overflow-tooltip label="登记信息">
              <template #default="scope">
                {{ scope.row.userName }}&nbsp;{{ scope.row.userPhone }}&nbsp;{{
                  scope.row.province +
                  scope.row.city +
                  scope.row.area +
                  scope.row.town +
                  scope.row.address
                }}
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 12px; display: flex; justify-content: flex-end">
            <el-pagination
              layout="total, prev, pager, next, jumper"
              :total="total"
              background
              :page-size="4"
              v-model:current-page="pagination.page"
              @current-change="getOrderGoods"
            />
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>

    <!-- 商品信息弹窗-->
    <div class="pro_dra">
      <el-drawer v-model="productDrawer" title="商品信息" show-close>
        <el-form
          label-position="top"
          label-width="100px"
          :model="formLabelAlign"
          style="max-width: 460px"
        >
          <el-form-item label="商品信息">
            <el-input
              readonly
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 16 }"
              :value="
                formLabelAlign.goodsBrand +
                '  &nbsp;  ' +
                formLabelAlign.goodsName +
                '  &nbsp;  ' +
                formLabelAlign.goodsModel +
                '  &nbsp;  ' +
                formLabelAlign.goodsSpec
              "
            />
          </el-form-item>
          <el-form-item label="商品数量" class="mt10">
            <el-input readonly :value="formLabelAlign.qty" />
          </el-form-item>
          <el-form-item label="购买时间" class="mt10">
            <el-input readonly :value="formLabelAlign.buyTime" />
          </el-form-item>
          <el-form-item label="质保到期" class="mt10">
            <el-input readonly :value="formLabelAlign.endTime" />
          </el-form-item>
          <el-form-item label="登记信息" class="mt10">
            <el-input
              :value="
                formLabelAlign.userName +
                ' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ' +
                formLabelAlign.userPhone +
                '\r\n' +
                formLabelAlign.province +
                '&nbsp;' +
                formLabelAlign.city +
                '&nbsp;' +
                formLabelAlign.area +
                '&nbsp;' +
                formLabelAlign.town +
                '&nbsp; ' +
                formLabelAlign.address
              "
              readonly
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 16 }"
            />
          </el-form-item>
          <el-form-item label="一物一码" class="mt10">
            <el-input
              :value="formLabelAlign.codes.join('；')"
              type="textarea"
              readonly
              :autosize="{ minRows: 1, maxRows: 16 }"
            />
          </el-form-item>
        </el-form>
      </el-drawer>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .pro_dra {
    :deep(.el-form-item) {
      margin-bottom: 20px !important;
    }
  }

  .ord_dis {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;

    .img {
      width: 12px;
      height: 12px;
      cursor: pointer;
    }
  }
</style>
